import React from 'react';
import { Button, Form, Input, Spin } from 'antd';
import api from '@/network/api';
import { useRequest } from 'umi';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const App: React.FC = () => {
  const { loading, run } = useRequest(
    (values) => {
      return api.addCateCake(values);
    },
    {
      manual: true,
      onSuccess: (result, params) => {
        console.log('result', result);
        console.log('params', params);
      },
    },
  );

  const onFinish = async (values: string) => {
    run(values);
  };

  /* 校验信息 */
  const validateMessages = {
    required: '${label} is required!',
    types: {
      number: '${label} is not a valid number!',
    },
    number: {
      range: '${label} must be between ${min} and ${max}',
    },
  };
  return (
    <Spin spinning={loading}>
      <Form
        {...layout}
        name="nest-messages"
        onFinish={onFinish}
        style={{ maxWidth: 600 }}
        validateMessages={validateMessages}
      >
        <Form.Item
          name="name"
          label="分类名称"
          rules={[
            {
              required: true,
              message: '请输入分类名称',
              max: 10,
              min: 2,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button style={{ marginLeft: '24px' }} htmlType="reset">
            重置
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

export default App;
